<template>
  <div class="communityWrite">
    <div class="wrap">
      <input class="inputValue" placeholder='标题'/>
      <textarea class="textareaValue" placeholder='编辑内容...'/>
      <!-- 上传照片 -->
      <div class="release-pic">
        <div class="pic-hint" @click="chooseImgTap">
          <img src="../../../assets/images/community/009.png"/>
        </div>
        <!--<div class="pic-item" v-if="src.length != 0">-->
        <!--<div v-for="src">-->
        <!--<div class="pic-list" @click="previewImgTap">-->
        <!--<img :src="item"/>-->
        <!--<span class="delImage"></span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
      </div>
      <!-- 所在位置 -->
      <div class="release-address" @click='chooseAddress'>
        <div class="address-left">
          <img src="../../../assets/images/community/010.png"/>
          <p>{{addressName}}</p>
        </div>
        <div class="address-right">
          <img src="../../../assets/images/community/011.png"/>
        </div>
      </div>
      <!-- 分类 -->
      <div class="release-classify">
        <div class="classify-left">
          <img src="../../../assets/images/community/012.png"/>
          <p>{{classifyName}}</p>
        </div>
        <div class="classify-right">
          <img src="../../../assets/images/community/011.png"/>
        </div>
      </div>
      <!-- 添加标签 -->
      <div class="release-tag">
        <div class="tag-left">
          <img src="../../../assets/images/community/012.png"/>
          <p>添加标签</p>
        </div>
        <div class="tag-right">
          <img src="../../../assets/images/community/011.png"/>
        </div>
      </div>
      <div class="tag-wrap">
        <div class="tag-add">
          <div class="add-title">已添加</div>
          <div class="add-container">
            <div class="add-list">
              <p>姐夫</p>
              <img src="../../../assets/images/community/015.png"/>
            </div>
          </div>
          <div class="add-hint">注：一条动态最多可添加三个标签</div>
        </div>
        <div class="tag-hot">
          <div class="hot-title">热门标签</div>
          <div class="hot-container">
            <!--<block wx:for="{{hotList}}" wx:key="*this">-->
            <p class="hot-text">解决</p>
            <!--</block>-->
          </div>
        </div>
      </div>
      <div class="release-btn" @click='onSubmitTap'>确认发布</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "communityWrite",
    data() {
      return {
        src: [],
        classifyId: 0,
        addressName: "所在位置",
        classifyName: "选择分类",
        classifyArr: [],
        classifyFade: "",
        classifyRotate: "",
        tagRotate: "",
        classifyFlag: true,
        tagValue: "",
        tagAdd: [],
        hotList: [],
        tagFlag: true,
        inputValue: "rr",
        textareaValue: "ww",
        ldata: false
      }
    },
    methods: {
      chooseImgTap() {
      },
      chooseAddress() {
      }
    }
  }
</script>


<style scoped lang="less">
  .communityWrite {
    width: 100%;
    padding-bottom: 100px;
    .wrap {
      padding: 0 24px;
      .inputValue {
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        color: #000;
        border: none;
        border-bottom: 1px solid #eeeeee;
        padding: 10px 0;
      }
      .textareaValue {
        width: 100%;
        padding: 5px 0;
        height: 140px;
        border: none;
        border-bottom: 1px solid #eeeeee;
        font-size: 14px;
        color: #000;
      }
      .release-pic {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #eeeeee;
        .pic-hint {
          width: 75px;
          height: 75px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .pic-item {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .pic-list {
            width: 80px;
            height: 80px;
            position: relative;
            margin-right: 10px;
            margin-bottom: 10px;
            .delImage {
              position: absolute;
              right: 5px;
              top: 5px;
            }
            img {
              width: 100%;
              height: 100%;
              overflow: hidden;
            }
          }
        }
      }
      .release-address, .release-classify, .release-tag {
        width: 100%;
        height: 45px;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .address-left, .classify-left, .tag-left {
          display: flex;
          align-items: center;
          img {
            width: 10px;
            height: 12px;
          }
          p {
            color: #000;
            font-size: 14px;
            margin-left: 8px;
          }
        }
        .address-right, .classify-right, .tag-right {
          margin-right: 2px;
          width: 7px;
          height: 12px;
          img {
            width: 100%;
            height: 100%;
          }

        }
      }
      .tag-wrap {
        padding: 6px;
        text-align: left;
        .tag-add {
          margin-top: 8px;
          padding-bottom: 15px;
          border-bottom: 1px solid #eee;
          .add-title {
            font-size: 14px;
            color: #000;
          }
          .add-hint {
            color: #999;
            margin-top: 17px;
            font-size: 12px;
          }
          .add-container {
            margin-top: 10px;
            .add-list {
              display: inline-block;
              padding: 5px 5px 5px 12px;
              background: #1bbacd;
              margin-right: 12px;
              border-radius: 20px;
              color: #fff;
              font-size: 0;
              img {
                display: inline-block;
                vertical-align: middle;
                margin-left: 8px;
                width: 15px;
                height: 15px;
              }
              p {
                font-size: 12px;
                color: #fff;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
        .tag-hot {
          width: 100%;
          margin-top: 15px;
          .hot-title {
            font-size: 14px;
            color: #000;
          }
          .hot-container {
            margin-top: 10px;
            .hot-text {
              display: inline-block;
              padding: 4px 14px;
              background: #ffac66;
              margin-right: 12px;
              border-radius: 20px;
              color: #fff;
              font-size: 14px;
              margin-bottom: 7px;
            }
          }
        }
      }
      .release-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 45px;
        line-height: 45px;
        background: #1bbacd;
        width: 100%;
        color: #fff;
      }
    }
  }

  .addressBtn {
    background: none;
    display: inline-block;
    vertical-align: middle;
    border: none;
    border-radius: 0;
    width: 90%;
    text-align: left;
    font-size: 14px;
    color: #000;
    padding: 0;
    margin-left: 9px;
  }

  button[class="addressBtn"]::after {
    border: 0;
  }

  button[class="button-hover"]::after {
    border: 0;
    background: none;
  }

  .classify-item {
    width: 100%;
    .classify-left text {
      margin-left: 5px;
    }
    .classify-list {
      width: 100%;
      height: 45px;
      line-height: 45px;
      padding-left: 20px;
      color: #576b95;
      font-size: 14px;
      border-bottom: 1px solid #eeeeee;
      box-sizing: border-box;
    }
  }

</style>
